<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>新增商品</title>
  <script src="../js/vue.global.js"></script>
  <!--  引入axios.js-->
  <script src="../js/axios.min.js"></script>
  <style>
    :root {
      --primary-color: #007BFF; /* 主色调，蓝色 */
      --secondary-color: #6c757d; /* 辅助色调，灰色 */
      --bg-color: #f8f9fa; /* 背景颜色，浅灰色 */
      --text-color: #333; /* 文本颜色，深灰色 */
      --border-radius: 8px;
      --transition-speed: 0.3s;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #app {
      width: 400px;
      background-color: white;
      padding: 30px;
      border-radius: var(--border-radius);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: var(--primary-color);
      font-size: 24px;
    }

    div {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    span {
      font-size: 14px;
      color: var(--text-color);
    }

    input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ced4da;
      border-radius: var(--border-radius);
      font-size: 14px;
      transition: all var(--transition-speed);
    }

    input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }

    button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 12px;
      border-radius: var(--border-radius);
      font-size: 14px;
      cursor: pointer;
      transition: all var(--transition-speed);
    }

    button:hover {
      background-color: #0056b3;
    }

    @media (max-width: 768px) {
      #app {
        width: 300px;
        padding: 20px;
      }

      h1 {
        font-size: 20px;
      }
    }
  </style>
</head>

<body>
<div id="app">
  <h1>新增商品</h1>
  <div>
    <span>商品名称:</span>
    <input type="text" v-model="product.name">
    <span>商品价格:</span>
    <input type="text" v-model="product.price">
    <span>商品描述:</span>
    <input type="text" v-model="product.description">
    <button @click="addProduct()">新增</button>
  </div>
</div>
<script>
  const app = {
    data() {
      return {
        product: {}//新增商品
      }
    },
    methods: {
      addProduct() {
        console.log(this.product)

        axios.post('/product', this.product)
                .then(res => {
                  if (res.status === 200) {
                    alert('新增成功')
                    //清空表单
                    this.product = {}
                    window.location.href ='product.html'//跳转到搜索页面‘

                  } else {
                    alert('新增失败')
                  }
                }).catch(err => {
          console.log(err)
          alert('新增商品出现异常，请检查网络连接或联系管理员')
        })
      },
    }
  }

  Vue.createApp(app).mount('#app')
</script>
</body>
</html>